<!DOCTYPE html>
<html>
<head>
	<title>{$name}·微信忆书</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/list.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/feiye.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/thank.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/common.css?v={$WST_V}">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/orders_management.css?v={$WST_V}">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/tipdisapply.css">
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/exif.js" ></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/webuploader.js?edition={$edition}" ></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/wyibook.js?edition={$edition}"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js">
	</script>
	<style type="text/css">
		body{
			font-family:PingFangSC-Regular;
			/*overflow: hidden;
			position: fixed;
			height:100%;*/
		}
		.zhao{
			position: absolute;
		}
		.feng1,.feng2{
			width:100%;
			height:1.33rem;
			border-radius: 0.16rem;
			border: 0.026667rem solid #FFFFFF;
			font-family: PingFangSC-Regular;
			font-size: 0.32rem;
			color: #FFFFFF;
			position: relative;
		}
		.feng2{
			margin-top:0.4rem;
			line-height: 1.12rem;
			text-align: center;
		}

		.left_am{
			display: inline-block;
			padding-right:0.373333rem;
			padding-bottom:0.32rem;
			padding-left:0.32rem;
			font-size:0.32rem;
		}
		.right_am{
			display: inline-block;
			padding-left:0.373333rem;
			padding-bottom:0.32rem;
			padding-right:0.32rem;
			font-size:0.32rem;

		}
		.feng1_top{
			text-align: center;
			padding-top:0.206667rem;
		}
		.feng1_bot{
			width: 100%;
			text-align: center;
			font-family: PingFangSC-Regular;
			font-size: 0.24rem;
			color: #FFFFFF;
			padding-top:0.053333rem;
			position: absolute;
			top:0.6rem;
			left:0;
		}
		.numb1{
			font-style: normal;

		}
		.zhao{
			height:auto;
			top:0;
		}
		.bookimg{
			/*width:100%;
			height:100%;*/
			position: relative;
		}
		.absolute{
			position: absolute;
			top:0;
			left:0;
		}
		.center{
			position: relative;
		}
		.text{
			position: absolute;
			top:0;
			left:0;
		}
		.book{
			height:9.466667rem;
			position: absolute;
			top:2.55rem;
			left:0;
			width: 9.466667rem;

		}
		.text{
			height:2.25rem;
		}

		.textname{
			border-bottom:0;
			height:auto;
			font-family: HansHandItalic;

		}
		.booktext{
			position: absolute;
			top:12.8rem;
			left:0;
			width:100%;
			height:auto;
			font-family: HansHandItalic;
		}

		.text1{
			top:0.8rem;
		}
		.book1{
			top:5.92rem;
			width:8.8rem;
			height:5.893333rem;
		}

		.text2{
			top:0;
		}
		.book2{
			top:2.853333rem;
			width:6.346667rem;
			height:8.986667rem;
			left:3.12rem;
		}

		.text3{
			top:6.346667rem;
		}
		.book3{
			top:0;
			left:0;
			height:6.346667rem;
		}
		.bookimg{
			height:100%;
			width: 100%;
		}
		.feng2{
			position: relative;
		}
		.hy{
			height:100%;
			width:100%;
			position: absolute;
			top:0;
			left:0;
		}
		.feng2{
			line-height: normal;
		}
		.zhuan_top,.zhuan_bot,.chuan_sure{
			width:100%;
			height:1.333333rem;
			border-radius: 6px;
			border:1px solid #fff;
			color:#fff;
			font-size: 0.32rem;
		}
		.zhuan_bot{
			margin-top:0.426667rem;
			line-height: 1.333333rem;
			text-align: center;
		}
		.zhaotop{
			width:5.12rem;
			height:4.0rem;
			left:2.186667rem;
		}
		.zhao{
			height: 13.68rem;
			width:9.466667rem;
		}
		.chuan_left,.chuan_right{
			width:1.333333rem;
			height:100%;
			float: left;

		}
		.chuan_center{
			width:2.4rem;
			height:0.8rem;
			margin-top:0.266667rem;
			float: left;
			text-align: center;
			color:#fff;
		}
		.chuan_number{
			margin-top: 0.133333rem;
		}
		.chuan_sure{

			height:2.133333rem;
			margin-top:0.426667rem;
			display: none;
		}
		.chuan1{
			width:100%;
			height:1.306667rem;
			border-bottom: 1px solid #fff;
			line-height: 1.306667rem;
			text-align: center;
		}
		.chuan2,.chuan3{
			width:2.533333rem;
			height:0.8rem;
			border-right:1px solid #fff;
			line-height: 0.8rem;
			text-align: center;
		}
		.chuan3{
			border-right:0;
		}
		.uploadimg{
			margin-top:-15%;
		}
		#zuopintitle {
			font-family: HansHandItalic;
		}
		.shape_0{ 	/*长图	width/height	*/
			position: absolute; 
			height: 100%;
			left: 50%;
			top: 0;
			transform: translate(-50%);
		}
		.shape_1{ 	/*方图*/
			position: absolute; 
			height: 100%;
			/*width: 100%;*/
			left: 50%;
			top: 0;
			transform: translate(-50%);
		}
		.shape_2{ 	/*横图*/
			position: absolute; 
			width: 100%;
			left: 0;
			top: 50%;
			transform: translate(0,-50%);
		}
		.wst-modal-content{
			margin-left: 3.213333rem;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="list_time">
		<div class="list_time_center">
			<div class="list_top">
				<div class="list_text">
					<div class="list_text_top clear">
						<div class="text_list"><h5>目录</h5></div>
						<div class="text_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_close_icon.png" style="width:1.6rem;height:1.6rem;"></div>
					</div>
					<div class="feng" onclick="wxbook(this)" style="cursor: pointer;">封面
					</div>
				</div>
				<div class="time">
					<div class="time_num">
						<foreach name="year" item="vo" key="ko">
							<ul class="clear">
								<h4 class="year">{$vo.year}</h4>
								<if condition="in_array($vo['year'].'-01',$month)"><li class="month" onclick="dump({$vo['year']},1,{$goodsId},this)" style="cursor: pointer;">1月</li></if>
								<if condition="in_array($vo['year'].'-02',$month)"><li class="month" onclick="dump({$vo['year']},2,{$goodsId},this)" style="cursor: pointer;">2月</li></if>
								<if condition="in_array($vo['year'].'-03',$month)"><li class="month" onclick="dump({$vo['year']},3,{$goodsId},this)" style="cursor: pointer;">3月</li></if>
								<if condition="in_array($vo['year'].'-04',$month)"><li class="month" onclick="dump({$vo['year']},4,{$goodsId},this)" style="cursor: pointer;">4月</li></if>
								<if condition="in_array($vo['year'].'-05',$month)"><li class="month" onclick="dump({$vo['year']},5,{$goodsId},this)" style="cursor: pointer;">5月</li></if>
								<if condition="in_array($vo['year'].'-06',$month)"><li class="month" onclick="dump({$vo['year']},6,{$goodsId},this)" style="cursor: pointer;">6月</li></if>
								<if condition="in_array($vo['year'].'-07',$month)"><li class="month" onclick="dump({$vo['year']},7,{$goodsId},this)" style="cursor: pointer;">7月</li></if>
								<if condition="in_array($vo['year'].'-08',$month)"><li class="month" onclick="dump({$vo['year']},8,{$goodsId},this)" style="cursor: pointer;">8月</li></if>
								<if condition="in_array($vo['year'].'-09',$month)"><li class="month" onclick="dump({$vo['year']},9,{$goodsId},this)" style="cursor: pointer;">9月</li></if>
								<if condition="in_array($vo['year'].'-10',$month)"><li class="month" onclick="dump({$vo['year']},10,{$goodsId},this)" style="cursor: pointer;">10月</li></if>
								<if condition="in_array($vo['year'].'-11',$month)"><li class="month" onclick="dump({$vo['year']},11,{$goodsId},this)" style="cursor: pointer;">11月</li></if>
								<if condition="in_array($vo['year'].'-12',$month)"><li class="month" onclick="dump({$vo['year']},12,{$goodsId},this)" style="cursor: pointer;">12月</li></if>
							</ul>
						</foreach>
					</div>
				</div>
			</div>
			<div class="list_bot">
			</div>
		</div>
	</div>
	<div class="center_container">
		<div class="center_zhao">
			<div class="edit_container">
			</div>
			<div class="list_container">
				<div class="list-top">
					<div class="no">
						<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_close_icon.png" style="width:1.28rem;height:1.28rem">
					</div>
					<div class="icon_top">
						<ul style="margin-bottom:0.533333rem;">
							<li><a style="font-size: 0.426667rem;color: #828282;">内容编辑</a></li>
							<li onclick="edit()" style="cursor: pointer;"><a><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_modify_the_content_icon.png"><strong>修改内容</strong>
							</a>
							</li>
							<li onclick="recover()" style="cursor: pointer;"><a><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_restore_content_icon.png"><strong>恢复内容</strong>
							</a>
							</li>
							<li onclick="add()" style="cursor: pointer;"><a><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_to_add_on_icon.png"><strong>补充内容</strong>
							</a>
							</li>
							<li onclick="choose()" style="cursor: pointer;"><a><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_choose_the_year_icon.png"><strong>选择月年</strong>
							</a>
							</li>
						</ul>

						<ul>
							<li><a style="font-size: 0.426667rem;color: #828282;">样式编辑</a></li>
							<li class="clear" onclick="wxbook(this)" style="cursor: pointer;"><a href=""><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_switch_the_cover_image_icon.png"><strong>切换封面图片</strong>
							</a>
							</li>
							<li class="clear" onclick="editcover()" style="cursor: pointer;"><a><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_modify_the_cover_icon.png"><strong>修改封面</strong>
							</a>
							</li>
							<li class="clear" onclick="more()" style="cursor: pointer;"><a><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_more_settings_icon.png"><strong>更多设置</strong>
							</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="list-bot">
					<div class="back clear">
						<div class="edit_share">
							<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_share_icon.png"><a href="">分享好友</a>
						</div>
						<div class="edit_return" onclick="booklist()" style="cursor: pointer;"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_return_bookshelf_icon.png"><a>返回书架</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="coverStyle" value="{$coverStyle}">
	<div class="main">
		<div class="center">
			<div class="{$css1}">
				<div class="textname">
					<h4 id="zuopintitle" style="text-align:right;font-family:fzxsjt;font-size: 0.586667rem;color: #3C3C3C;font-weight:normal;">{$bookname}</h4>
					<p style="text-align:right;font-family:fzxsjt;line-height:0.533333rem">{$name}·作品</p>
				</div>
			</div>
			<div class="{$css2}">
				<div class="bookimg" id="bookCover">
					<foreach name="images" item="vb" key="kb">
						<if condition="strpos($vb['image'],'pload') neq false">
							<img src="http://www.youyiku-yishu.cn/{$vb.image}" data-id="{$vb.id}" class="alt shape shape_{$vb['shape']} none">
						<else/>
							<img src="http://www.youyiku-yishu.cn/{$vb.image}" data-id="{$vb.id}" class="one img absolute alt none">
						</if>
					</foreach>
				</div>
				<input type="hidden" id="bookCode">
			</div> 
			<div class="booktext">优忆库-忆书·出品</div>
		</div>

		<div class="titleMain">
			<div class="feiye">
				<div class="feiye_img">
					<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_title_page_bg.jpg">
				</div>
			</div>
			<div class="zhushu">
				<div class="zhushu_text">
					<div class="baobao">{$name}的微信书</div>
					<div class="xinxi">
						<div class="xinxi_main">
							<a>「优忆库忆书」</a>
							<a>{$name}著</a>
						</div>
						<div class="xiangxi">
							<a class="a_text">&nbsp;&nbsp;技&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;术</a>
							<a>优忆库忆书</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品</a>
							<a>优忆库忆书</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</a>
							<a>优忆库忆书</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;责任编辑</a>
							<a>优忆库忆书小编</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;装帧设计</a>
							<a>优忆库忆书设计</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;制&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作</a>
							<a>{$name}</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</a>
							<a>{$good['page']}页</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</a>
							<a>{$good['allText']}字符</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次</a>
							<a>2018年第一版</a>
						</div>
						<div class="xiangxi xiangxi_top">
							<a class="a_text">&nbsp;&nbsp;定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</a>
							<a>无价</a>
						</div>
					</div>
					<div class="gongsi">
						<div class="gongsi_text">英博四季数码设计（中山）有限公司
						</div>
						<div class="gongsi_text">网站:www.yingbosj.com
						</div>
					</div>
					<div class="ban">本书版权归内容原创者所有，优忆库忆书提供代印刷服务，未经作者许可不得转载、复制、印刷.</div>
				</div>
			</div>
			<div class="ganyan">
			<if condition="$thank">
				<div class="xuyan_main">
					<div class="xuyan show zhixie" style="display: none">
						<div class="jia">
							<i class="jiahao">+</i>&nbsp;增加致谢
						</div>
					</div>
					<div class="main_main" style="display: block;">
						<div class="delete">
							<div class="baocun left zx_baocun" onclick="zxsave()" style="cursor: pointer;"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_baocun_icon_nor.png" class="img">
							</div>
							<div class="laji right zx_laji"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_delete_icon_nor.png" class="img">
							</div>
						</div>
						<div class="youzhen">
							<div class="gezi"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_zip_code_icon.png" class="img"></div>
						</div>
						<div class="thank">
							<div class="thankYou"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_text_icon.png" class="img">
							</div>
							<div class="zxTishi">

									这一刻最想感谢谁…<br>（点击这里输入内容)<br>

							</div>
							<textarea maxlength="75" class="thankText zxText" style="text-align:right" id="zxcontent">{$thank}</textarea>
							<div class="five zx_five none">致谢不超过五行</div>
							<div class="delete_text zx_delete">致谢删除成功</div>

						</div>
						<div class="logo">
							<div class="logo_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_yyk_seal_icon.png" class="img"></div>
						</div>
					</div>
				</div>
			<else/>
				<div class="xuyan_main">
					<div class="xuyan show zhixie">
						<div class="jia">
							<i class="jiahao">+</i>&nbsp;增加致谢
						</div>
					</div>
					<div class="main_main">
						<div class="delete">
							<div class="baocun left zx_baocun" onclick="zxsave()" style="cursor: pointer;"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_baocun_icon_nor.png" class="img">
							</div>
							<div class="laji right zx_laji"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_delete_icon_nor.png" class="img">
							</div>
						</div>
						<div class="youzhen">
							<div class="gezi"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_zip_code_icon.png" class="img"></div>
						</div>
						<div class="thank">
							<div class="thankYou"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_text_icon.png" class="img">
							</div>
							<div class="zxTishi">

									这一刻最想感谢谁…<br>（点击这里输入内容)<br>

							</div>
							<textarea maxlength="75" class="thankText zxText" style="text-align:right" id="zxcontent">{$thank}</textarea>
							<div class="five zx_five none">致谢不超过五行</div>
							<div class="delete_text zx_delete">致谢删除成功</div>

						</div>
						<div class="logo">
							<div class="logo_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_yyk_seal_icon.png" class="img"></div>
						</div>
					</div>
				</div>
			</if>
				
				<if condition="$preface">
				<div class="xuyan_main">
					<div class="xuyan xy" style="display: none">
						<div class="jia">
							<i class="jiahao">+</i>&nbsp;增加序言
						</div>
					</div>
					<div class="xy_main" style="display: block;">
						<div class="delete">
							<div class="baocun left xy_baocun" onclick="xysave()" style="cursor: pointer;"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_baocun_icon_nor.png" class="img">
							</div>
							<div class="xy_laji right laji"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_delete_icon_nor.png" class="img">
							</div>
						</div>
						<div class="youzhen">
							<!-- <div class="gezi"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_zip_code_icon.png" class="img">
							</div> -->
						</div>
						<div class="thank">
							<div class="thankYou"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_preface_text_icon.png" class="img">
							</div>
							<div class="xyTishi">

									写个属于自己的序吧…<br>（点击这里输入内容）

							</div>
							<textarea maxlength="75" class="thankText xyText" style="text-align:right" id="xycontent">{$preface}</textarea>
							<div class="five xy_five none">序言不超过五行</div>
							<div class="delete_text xy_delete">序言删除成功</div>
						</div>
						<div class="shuming">
							<div class="Input">

									署名<br>（点击这里输入内容）</div>
							<input maxlength="12" type="text" name="" value="{$sign}" class="shuInput">
							<div class="shuNumber none">
								<span>0</span>/12
							</div>
						</div>
					</div>
				</div>

				<else/>

				<div class="xuyan_main">
					<div class="xuyan xy">
						<div class="jia">
							<i class="jiahao">+</i>&nbsp;增加序言
						</div>
					</div>
					<div class="xy_main">
						<div class="delete">
							<div class="baocun left xy_baocun" onclick="xysave()" style="cursor: pointer;"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_baocun_icon_nor.png" class="img">
							</div>
							<div class="xy_laji right laji"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_delete_icon_nor.png" class="img">
							</div>
						</div>
						<div class="youzhen">
							<!-- <div class="gezi"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_thanks_zip_code_icon.png" class="img">
							</div> -->
						</div>
						<div class="thank">
							<div class="thankYou"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_preface_text_icon.png" class="img">
							</div>
							<div class="xyTishi">

									写个属于自己的序吧…<br>（点击这里输入内容）

							</div>
							<textarea maxlength="75" class="thankText xyText" style="text-align:right" id="xycontent">{$preface}</textarea>
							<div class="five xy_five none">序言不超过五行</div>
							<div class="delete_text xy_delete">序言删除成功</div>
						</div>
						<div class="shuming">
							<div class="Input">

									署名<br>（点击这里输入内容）</div>
							<input maxlength="12" type="text" name="" value="{$sign}" class="shuInput">
							<div class="shuNumber none">
								<span>0</span>/12
							</div>
						</div>
					</div>
				</div>

				</if>
				
				<div class="yellow">
					<div class="lookTime" onclick="firstcontent({$goodsId})" style="cursor: pointer;">
						<div class="look_time">查看{$firstyear}年{$firstmonth}月</div>
						<div class="down"><img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_to_view_icon.png"></div>

					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="zhao">
		<div class="zhaobot"></div>
		<div class="zhaotop">	
			<div class="zhuan_top">
				<div class="chuan_left"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_left_btn_nor.png" class="img"></div>
				<div class="chuan_center">
					<span>切换封面图片</span>
					<div class="chuan_number"><span class="numb12">{$order}</span>/<span class="gg">{$images|count}</span></div>
				</div>
				<div class="chuan_right"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_right_btn_nor.png" class="img"></div>
			</div>
			<div class="zhuan_bot" id="falseUpload" style="position: relative;">上传封面图片
				<span class="shangNone" style="position:absolute;top:0;left:0; opacity: 0;width:100%;height:100%;display:block;">
					<input style="width:100%;height:100%;position:absolute;top:0;left:0;" onchange="selectFileImage(this);" type="file" id="uploadImage" class="uploadfile-input" accept="image/*" ></span>
				<!--<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />-->
			</div>
			<div class="chuan_sure">
				<div class="chuan1 left">确认此图片上传为封面？</div>
				<div class="chuan2 left" onclick="test()" style="cursor: pointer;">确认</div>
				<div class="chuan3 left" onclick="closeUploadArea();" style="cursor: pointer;">取消</div>

			</div>

		</div>
		
	</div>

	<div class="footer">
		<div class="radius"></div>
		<div class="footer-img">
			<div class="edit"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_edit_btn_nor.png" style="height:100%;width:100%;"></div>
			<div class="list-img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/wechat_ book_edit_catalog_icon_nav_nor.png" style="width:1.066667rem;height:1.066667rem;"><a style="display:block;width:100%;height:0.4rem;font-size: 10px;color: #5BC7B8;">目录</a></div>
			<div class="buy" onclick="buy({$goodsId})" style="cursor: pointer;"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_buy_btn_nor.png" style="height:100%;width:100%;"></div>
		</div>
	</div>
</div>
<div style="width: 100%;height: 1000px;display: none">

	<header data-am-widget="header" class="am-header am-header-default am-header-fixed wst-inner-page-nav" id="clip" style="display:none;">
		<div class="am-header-left am-header-nav" onclick="closeUploadArea();" style="cursor: pointer;">关闭</div>
		<div class="am-header-right am-header-nav" id="clipBtn">上传</div>
	</header>

	<div class="am-form-group am-form-file">
		<button type="button" class="am-btn am-btn-danger am-btn-sm addImg" id="addImg"><i class="am-icon-cloud-upload"></i></button>


		<div style="clear:both;"></div>
	</div>

	<div class="upload-modal" id="upload_modal">
		<div id="clipArea" class="clipArea"></div>
		<input type="hidden" id="imgData" autocomplete="off">
	</div>

	<div class="am-modal am-modal-loading am-modal-no-btn none" tabindex="-1" id="wst-default-loading">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">Loading...</div>
			<div class="am-modal-bd">
				<span class="am-icon-spinner am-icon-spin"></span>
			</div>
		</div>
	</div>
<input type="hidden" class="wxNumber" value="{$wxNumber}">
	<input type="hidden" class="status" value="{$status}">
</div>
<!--提示信息-->
<div class="am-g wst-msg-modal" id="wst-msg-modal">
	<div class="wst-modal-content" id="wst-modal-content"></div>
</div>
<include file="./Apps/WebApp/View/default/common_footer.html" />
<include file="./Apps/WebApp/View/default/common_js.html" />
<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/Photoclip/iscroll-zoom.js"></script>
<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/Photoclip/hammer.js"></script>
<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/Photoclip/jquery.photoClip.js"></script>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/list.js"></script>

</body>

<!--<div class="photo" style="display:none">-->
	<!--<div class="photo_zhao"></div>-->
	<!--<div class="photo_container">-->
		<!--<div class="photo_top mui-pull-left">是否确认上传图片</div>-->
		<!--<div class="photo_left mui-pull-left photo_color" id="clipBtn">确定</div>-->
		<!--<div class="photo_left photo_right mui-pull-left" onclick="closeUploadArea();">取消</div>-->

	<!--</div>-->
<!--</div>-->
<script>
	window.imagemes='';
	function selectFileImage(fileObj) {
		var file = fileObj.files['0'];
		//图片方向角 added by lzk
//		console.log(file)
		var Orientation = null;

		if (file) {
			console.log(file);
//			console.log("正在上传,请稍后...");
			var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
			if (!rFilter.test(file.type)) {
				//showMyTips("请选择jpeg、png格式的图片", false);
				return;
			}
			// var URL = URL || webkitURL;
			//获取照片方向角属性，用户旋转控制
			EXIF.getData(file, function() {
				// alert(EXIF.pretty(this));
				EXIF.getAllTags(this);
				//alert(EXIF.getTag(this, 'Orientation'));
				Orientation = EXIF.getTag(this, 'Orientation');
				//return;
			});

			var oReader = new FileReader();
			oReader.onload = function(e) {
				//var blob = URL.createObjectURL(file);
				//_compress(blob, file, basePath);
				var image = new Image();
				image.src = e.target.result;
				image.onload = function() {
					var expectWidth = this.naturalWidth;
					var expectHeight = this.naturalHeight;

					if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
						expectWidth = 800;
						expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
					} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
						expectHeight = 1200;
						expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
					}
					var canvas = document.createElement("canvas");
					var ctx = canvas.getContext("2d");
					canvas.width = expectWidth;
					canvas.height = expectHeight;
					ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
					var base64 = null;
					//修复ios
					if (navigator.userAgent.match(/iphone/i)) {
//						console.log('iphone');
						//alert(expectWidth + ',' + expectHeight);
						//如果方向角不为1，都需要进行旋转 added by lzk
						if(Orientation != "" && Orientation != 1){
//							alert('旋转处理');
							switch(Orientation){
								case 6://需要顺时针（向左）90度旋转
//									alert('需要顺时针（向左）90度旋转');
									rotateImg(this,'left',canvas);
									break;
								case 8://需要逆时针（向右）90度旋转
//									alert('需要顺时针（向右）90度旋转');
									rotateImg(this,'right',canvas);
									break;
								case 3://需要180度旋转
//									alert('需要180度旋转');
									rotateImg(this,'right',canvas);//转两次
									rotateImg(this,'right',canvas);
									break;
							}
						}

						/*var mpImg = new MegaPixImage(image);
						 mpImg.render(canvas, {
						 maxWidth: 800,
						 maxHeight: 1200,
						 quality: 0.8,
						 orientation: 8
						 });*/
						base64 = canvas.toDataURL("image/jpeg", 0.8);
						imagemes=base64;
					}
//					else if (navigator.userAgent.match(/Android/i)) {
//						// 修复android
//						var encoder = new JPEGEncoder();
//						base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
//					}
					else{
						//alert(Orientation);
						if(Orientation != "" && Orientation != 1){
							//alert('旋转处理');
							switch(Orientation){
								case 6://需要顺时针（向左）90度旋转
//									alert('需要顺时针（向左）90度旋转');
									rotateImg(this,'left',canvas);
									break;
								case 8://需要逆时针（向右）90度旋转
//									alert('需要顺时针（向右）90度旋转');
									rotateImg(this,'right',canvas);
									break;
								case 3://需要180度旋转
//									alert('需要180度旋转');
									rotateImg(this,'right',canvas);//转两次
									rotateImg(this,'right',canvas);
									break;
							}
						}

						base64 = canvas.toDataURL("image/jpeg", 0.8);
						imagemes=base64;
					}
					//uploadImage(base64);
//					console.log(base64);


//                $("#myImage").attr("src", base64);
				};
			};
			oReader.readAsDataURL(file);
		}
	}
	$('.chuan2').click(function(){
//		alert(imagemes)
		$.post(WST.U('WebApp/WxUpload/uploadPicture'), {'imgData': imagemes}, function(data){

//						alert(JSON.stringify(data))
			if(data.status==1){
				var wxNumber=109999;
				$.post(WST.U('WebApp/WxUpload/addCover'),{imgUrl:data.filepath,wxNumber:wxNumber},function(json){
//					console.log(json);
					if(json.status==1){
						var shape=json.shape;
						if($('.one').length>=14){
							$('.one').eq(0).remove();

							$('.numb12').text(15)

						}else{
							$('.numb12').text(15)
						}
						$('.upload').remove();
						
						if(shape==0){
							var str = '<img src="'+ WST.ROOT +'/'+data.filepath+'" data-id="'+json.cover+'" class="shape shape_0">';
						}else if(shape==1){
							var str = '<img src="'+ WST.ROOT +'/'+data.filepath+'" data-id="'+json.cover+'" class="shape shape_1">';
						}else{
							var str = '<img src="'+ WST.ROOT +'/'+data.filepath+'" data-id="'+json.cover+'" class="shape shape_2">';
						}		
						$('#bookCover img').addClass("none");
						$('#bookCover').append(str);

					}else{
						wstMsg('上传失败，请重试');
					}
				})
			}


			$("#wst-default-loading").modal('close');
			closeUploadArea();
		});
	})



	//对图片旋转处理 added by lzk www.bcty365.com
	function rotateImg(img, direction,canvas) {
		//alert(img);
		//最小与最大旋转方向，图片旋转4次后回到原方向
		var min_step = 0;
		var max_step = 3;
		//var img = document.getElementById(pid);
		if (img == null)return;
		//img的高度和宽度不能在img元素隐藏后获取，否则会出错
		var height = img.height;
		var width = img.width;
		//var step = img.getAttribute('step');
		var step = 2;
		if (step == null) {
			step = min_step;
		}
		if (direction == 'right') {
			step++;
			//旋转到原位置，即超过最大值
			step > max_step && (step = min_step);
		} else {
			step--;
			step < min_step && (step = max_step);
		}
		//img.setAttribute('step', step);
		/*var canvas = document.getElementById('pic_' + pid);
		 if (canvas == null) {
		 img.style.display = 'none';
		 canvas = document.createElement('canvas');
		 canvas.setAttribute('id', 'pic_' + pid);
		 img.parentNode.appendChild(canvas);
		 }  */
		//旋转角度以弧度值为参数
		var degree = step * 90 * Math.PI / 180;
		var ctx = canvas.getContext('2d');
		switch (step) {
			case 0:
				canvas.width = width;
				canvas.height = height;
				ctx.drawImage(img, 0, 0);
				break;
			case 1:
				canvas.width = height;
				canvas.height = width;
				ctx.rotate(degree);
				ctx.drawImage(img, 0, -height);
				break;
			case 2:
				canvas.width = width;
				canvas.height = height;
				ctx.rotate(degree);
				ctx.drawImage(img, -width, -height);
				break;
			case 3:
				canvas.width = height;
				canvas.height = width;
				ctx.rotate(degree);
				ctx.drawImage(img, -width, 0);
				break;
		}
	}

	function test(){
		$('#clipBtn').click();
		$('.chuan_sure').hide();
		$('.zhuan_bot').show();
	}
</script>


<script>

	var input1=$('.zxText').text().length;
	if(input1!=''){
		$('.zxTishi').addClass('none');
	}
	var input2=$('.xyText').text().length;
	if(input2!=''){
		$('.xyTishi').addClass('none');
	}
	var input3=$('.shuInput').val().length;
	if(input3!=''){
		$('.Input').addClass('none');
	}
	function falseUpload(){
		alert(2344)
		$('#uploadImage').click();
		alert(555)
	}



	$('#uploadImage').on('change', function() {
		$('.not-upload').hide();
//	$('#clip').show();
//	$('#upload_modal').show();
		$('.zhuan_bot').css('display','none');

		$('.chuan_sure').show();
//	$('.hy').html('确定要上傳該圖片吗?');
	});
	//图片上传
	$("#clipArea").photoClip({
		width: 350,
		height: 350,
		file: "#uploadImg",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			$("#wst-default-loading").modal();
		},
		loadComplete: function() {
			$('#clipArea .photo-clip-mask').remove();//不需要截图，因此移除
			$("#wst-default-loading").modal('close');
		},
		clipFinish: function(dataURL) {
//			console.log(dataURL);

			var imgData = $('#clipArea .photo-clip-view').find('img').attr('src');
			if(!imgData || imgData==''){
				wstMsg('请先选择图片');
				return false;
			}
			$("#wst-default-loading").modal();
//			console.log(imgData);
//			alert(dataURL)

//
			$.post(WST.U('WebApp/WxUpload/uploadPicture'), {'imgData': imgData}, function(data){

//					alert(JSON.stringify(data))
				if(data.status==1){
					var wxNumber=109999;
					$.post(WST.U('WebApp/WxUpload/addCover'),{imgUrl:data.filepath,wxNumber:wxNumber,order:15},function(json){
//							alert(JSON.stringify(json))
						if(json.status==1){
//							$('#bookCover').empty();
//							alert($('.one').length)
							if($('.one').length>=14){
								$('.one').eq(0).remove();

								$('.numb12').text(15)

							}else{
								$('.numb12').text(15)
							}
							$('.upload').remove();
							var coverStyle = $("#coverStyle").val();
							if(shape==0){
								var str = '<img src="'+ WST.ROOT +'/'+data.filepath+'" data-id="'+json.cover+'" class="shape_0">';
							}else if(shape==1){
								var str = '<img src="'+ WST.ROOT +'/'+data.filepath+'" data-id="'+json.cover+'" class="shape_1">';
							}else{
								var str = '<img src="'+ WST.ROOT +'/'+data.filepath+'" data-id="'+json.cover+'" class="shape_2">';
							}
							$('#bookCover').append(str);
						}else{
							wstMsg('上传失败，请重试');
						}
					})
				}


				$("#wst-default-loading").modal('close');
				closeUploadArea();
			});
		}
	});

	//关闭图片上传区
	function closeUploadArea(){
//		$('.not-upload').show();
		$('.chuan_sure').hide();
		$('#clip').hide();
		//清空图片上传区的内容
		$('#clipArea').find('img').remove();
		$('#file').val('');
		$('#view').css('background-image','');
		$('#imgData').val('');
		$('.zhuan_bot').show();
	}


	function buy(goodsId){
		location.href = WST.U("WebApp/Orders/buylist",'goodsId='+goodsId);
	}

	function edit(){
		location.href = WST.U("WebApp/WxBooks/deletelist");
	}
	function recover(){
		location.href = WST.U("WebApp/WxBooks/recoverlist");
	}
	function add(){
		location.href = WST.U("WebApp/WxBooks/addlist");
	}
	function choose(){
		location.href = WST.U("WebApp/WxBooks/chooselist");
	}
	function editcover(){
		location.href = WST.U("WebApp/WxBooks/editcoverlist");
	}
	function more(){
		location.href = WST.U("WebApp/WxBooks/recoveralist");
	}
	function wxbook(params){
		location.href = WST.U("WebApp/WxBooks/wxbook");
	}
	function booklist(){
		location.href = WST.U("WebApp/Index/index");
	}
	function firstcontent(goodsId){
		location.href = WST.U("WebApp/WxBooks/showcontent",'goodsId='+goodsId);
	}
	//跳转到对应内容页
	function dump(time1,time2,goodsId,parma){


		if(time2<10){
			var time=time1.toString()+'-'+'0'+time2.toString();

			location.href = WST.U("WebApp/WxBooks/showcontent",'time='+time+'&goodsId='+goodsId);
		}
		else{
			var time=time1.toString()+'-'+time2.toString();

			location.href = WST.U("WebApp/WxBooks/showcontent",'time='+time+'&goodsId='+goodsId);
		}
	}


	//添加致谢
	function zxsave(){
		var thank = $("#zxcontent").val();
		$.ajax({
			type: "get",//数据发送的方式（post 或者 get）
			url: " {:U('WxBooks/addthank')}",//要发送的后台地址
			data:{'thank':thank},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
			dataType: "json",//后台处理后返回的数据格式
			success:function(data){
				if(data.status==1){
					$('<div>').appendTo('body').addClass('alert alert-success').html('添加成功').show().delay(1500).fadeOut();
//					window.location.reload()
				}
			}
		})
	}

	//添加序言和署名
	function xysave(){
		var preface = $("#xycontent").val();

		var sign=$('.shuInput').val();
		$.ajax({
			type: "get",//数据发送的方式（post 或者 get）
			url: " {:U('WxBooks/addpreface')}",//要发送的后台地址
			data:{'preface':preface,'sign':sign},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
			dataType: "json",//后台处理后返回的数据格式
			success:function(data){
//				alert(JSON.stringify(data))
				if(data.status==1){
					$('<div>').appendTo('body').addClass('alert alert-success').html('添加成功').show().delay(1500).fadeOut();
//					window.location.reload()
				}

			}
		})
	}
	window.flag='1';

	//保存已选择图片

	$(window).on("scroll",function() {
		if(flag==1){
			if(window.document.body.scrollTop>=250){
				$(".zhao").css('display','none');
				var code=$('.numb12').text();
//				alert(code)
				var img=$('.bookimg img').eq(code-1).attr('src');

				img=img.substring(1,img.length);
				flag='2';
//				alert(img);
				$.ajax({
					type: "get",//数据发送的方式（post 或者 get）
					url: " {:U('WxBooks/savecover')}",//要发送的后台地址
					data:{'cover':img},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
					dataType: "json",//后台处理后返回的数据格式
					success:function(data){
//						alert(JSON.stringify(data));
						if(data.status==1){
							$('<div>').appendTo('body').addClass('alert alert-success').html('保存成功').show().delay(1500).fadeOut();
						}

					}
				})

			}
		}} );

//隐藏上传图片文字
//	$('.shangNone').click(function(){
//		setTimeout(function(){
//			$('.zhuan_bot').css('display','none');
//		},500);
//
//	})
	$(".list_time").click(function(ev){
		ev.preventDefault();
		$(this).hide();
	})
	$(".list_top").click(function(ev){
		ev.stopPropagation();
	})

	$(".center_container").click(function(ev){
		$(this).hide();
	})
	$(".list_container").click(function(ev){
		ev.stopPropagation();
	})


</script>
</html>